<template>
  <div class="carousel-item-container" ref="containerRef" @mousemove="handleMousemove" @mouseout="handleMouseout">
    <div class="image" ref="imageRef" :style="imagePosition">
      <ImageLoader :placeholder="item.midImg" :src="item.bigImg" @load="showText"/>
    </div>
    <div class="title" ref="titleRef">{{item.title}}</div>
    <div class="description" ref="descriptionRef">{{item.description}}</div>
  </div>
</template>

<script>
import ImageLoader from "@/components/ImageLoader";

export default {
  components: {ImageLoader},
  props: ['item'],
  data() {
    return {
      titleWidth: 0,
      descriptionWidth: 0,
      containerSite: null,
      imageSite: null,
      mouseX: 0,
      mouseY: 0
    }
  },
  computed: {
    imagePosition() {
      if (!this.containerSite || !this.imageSite) {
        return
      }
      const extraWidth = this.imageSite.width - this.containerSite.width
      const extraHeight = this.imageSite.height - this.containerSite.height
      const left = -extraWidth / this.containerSite.width * this.mouseX
      const top = -extraHeight / this.containerSite.height * this.mouseY
      return {
        transform: `translate(${left}px, ${top}px)`
      }
    },
    center() {
      return {
        x: this.containerSite.width / 2,
        y: this.containerSite.height / 2
      }
    }
  },
  mounted() {
    this.titleWidth = this.$refs.titleRef.clientWidth
    this.descriptionWidth = this.$refs.descriptionRef.clientWidth
    window.addEventListener('resize', this.setSize)
    this.setSize()
    this.mouseX = this.center.x
    this.mouseY = this.center.y
  },
  destroyed() {
    window.removeEventListener('resize', this.setSize)
  },
  methods: {
    showText() {
      this.$refs.titleRef.style.width = 0
      this.$refs.titleRef.style.opacity = 1
      this.$refs.titleRef.style.transition = '1s'
      this.$refs.titleRef.offsetHeight
      this.$refs.titleRef.style.width = this.titleWidth + 'px'

      this.$refs.descriptionRef.style.width = 0
      this.$refs.descriptionRef.style.opacity = 1
      this.$refs.descriptionRef.style.transition = '2s 1s'
      this.$refs.descriptionRef.offsetHeight
      this.$refs.descriptionRef.style.width = this.descriptionWidth + 'px'

    },
    handleMousemove(e) {
      const containerRect = this.$refs.containerRef.getBoundingClientRect()
      this.mouseX = e.clientX - containerRect.left
      this.mouseY = e.clientY - containerRect.top
    },
    setSize() {
      this.containerSite = {
        width: this.$refs.containerRef.clientWidth,
        height: this.$refs.containerRef.clientHeight
      }
      this.imageSite = {
        width: this.$refs.imageRef.clientWidth,
        height: this.$refs.imageRef.clientHeight
      }
    },
    handleMouseout() {
      this.mouseX = this.center.x
      this.mouseY = this.center.y
    }
  }

}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.carousel-item-container{
  width: 100%;
  height: 100%;
  background-color: @dark;
  overflow: hidden;
  position: relative;
  color: #ffffff;
  .image{
    width: 110%;
    height: 110%;
    transition: 0.3s;
  }
  .title, .description{
    position: absolute;
    top: 50%;
    left: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 1px 0 rgba(0, 0, 0, 0.5), -1px 0 rgba(0, 0, 0, 0.5), 0 1px rgba(0, 0, 0, 0.5), 0 -1px rgba(0, 0, 0, 0.5);
    opacity: 0;
  }
  .title{
    font-size: 2em;
    transform: translateY(calc(50% - 30px));
  }
  .description{
    font-size: 1.2em;
    transform: translateY(calc(50% + 30px));
  }
}
</style>
